<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>故障统计</el-breadcrumb-item>
    </el-breadcrumb>
    <el-table size="small" @selection-change="handleSelectionChange" :data="listData" highlight-current-row
              v-loading="loading" border element-loading-text="玩命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="faultid" label="设备ID">
      </el-table-column>
      <el-table-column sortable prop="lev" label="项目编号">
      </el-table-column>
      <el-table-column sortable prop="type" label="设备名称">
      </el-table-column>


    </el-table>

  </div>
</template>
<script>
import {deviceDelete, deviceList} from "../../api/fault_magMG";
import {faultDelete, faultList} from "../../api/faultMG";

export default {
  data(){
    return{
      listData: [], //用户数据
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        lev:'',
        type:''


      },
      formInline: {
        pageNum: 1,
        pageSize: 10,


        faultid: '',

        lev: '',

      },

      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
    }
  },
  created() {
    this.getdata(this.formInline)
  },
  methods:{
    getdata(formInline) {
      console.log(formInline)
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      faultList(formInline)
        .then(res => {  // 后端响应
          this.loading = false
          if (res.code != 20000) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            const pageInfo = res.data;  //先得到pageInfo   (pageHelper 中的分页信息)
            this.listData = pageInfo.list;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.pageNum
            this.pageparm.pageSize = this.formInline.pageSize
            this.pageparm.total = pageInfo.total
            console.log(this.pageparm)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('用户信息加载失败，请稍后再试！')
        })
    },

    // faultdelete(faultid) {
    //   this.$confirm('此操作将永久删除, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     faultDelete(faultid).then(res => {
    //       if (res.code == 20000) {
    //         this.$message({
    //           type: 'success',
    //           message: '删除成功!'
    //         });
    //         this.getdata(this.formInline)
    //       }
    //     })
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     });
    //   });
    // },

    handleEdit(index, rowData) {
      // console.log(index,rowData)
      this.title = "编辑"
      this.editForm = rowData;
      this.editFormVisible = true;
    },

    handleSelectionChange(val) {
      // val是数组,其中是前端框架自己封装的,其实是勾选的每一行数据对象
      console.log(val)
      var idArr = [];
      for (var i = 0; i < val.length; i++) {
        var obj = val[i];
        //console.log(obj)
        idArr.push(obj.deciceId);
      }
      // console.log(idArr)

      this.multipleSelection = idArr;
    },
  }
}
</script>

<style>

</style>


